<template>
  <div style="opacity: 0.8">
    <el-card>
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="教练">
          <el-select v-model="searchForm.coachId" clearable placeholder="请选择">
            <el-option
              v-for="item in user"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程状态">
          <el-select v-model="searchForm.status" clearable>
                <el-option
                label="未开始"
                value="0">
                </el-option>
                <el-option
                label="已开始"
                value="1">
                </el-option>
                <el-option
                label="已结束"
                value="2">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="购买状态">
          <el-select v-model="searchForm.payStatus" clearable>
                <el-option
                    label="全部"
                    value="2">
                </el-option>
                <el-option
                label="未购买"
                value="0">
                </el-option>
                <el-option
                label="已购买"
                value="1">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getData()">查询</el-button>
          <el-button
          v-if="loginUserInfo.type==='1' || loginUserInfo.type==='2'"
            @click="openDialog('添加课程', { a: '1' })"
            plain
            >添加课程</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 数据列表-->
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        highlight-current-row
      >
        <el-table-column
          prop="title"
          label="课程名称"
          min-width="160"
        ></el-table-column>
        <el-table-column
          prop="courseStartDate"
          label="课程开始时间"
          min-width="120"
        ></el-table-column>
        <el-table-column
          prop="courseEndDate"
          label="课程结束时间"
          min-width="140"
        ></el-table-column>
        <el-table-column
          prop="coach.name"
          label="教练"
          min-width="140"
        ></el-table-column>
        <el-table-column
          prop="price"
          label="课程价格"
          min-width="140"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="课程状态"
          min-width="140"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status === '0'">未开始</span>
            <span v-if="scope.row.status === '1'">已开始</span>
            <span v-if="scope.row.status === '2'">已结束</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="150"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              v-if="loginUserInfo.type==='1' || loginUserInfo.type==='2'"
              type="text"
              icon="el-icon-edit"
              @click="openDialog('编辑课程', scope.row)"
              style="margin-right: 5px"
              >编辑
            </el-button>
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              @confirm="deleteInfo(scope.row)"
              icon-color="red"
              title="确定删除该课程吗？"
            >
              <el-button
                v-if="loginUserInfo.type==='1' || loginUserInfo.type==='2'"
                type="text"
                slot="reference"
                icon="el-icon-delete"
                class="red"
                >删除
              </el-button>
            </el-popconfirm>
              <el-button
              v-if="loginUserInfo.type==='0'"
                type="text"
                slot="reference"
                icon="el-icon-s-goods"
                class="red"
                @click="buyCourse(scope.row)"
                >购买
              </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
      <!--添加/修改 模态框-->
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogFormVisible"
        width="600px"
      >
        <el-form
          :model="editCourseForm"
          ref="editCourseForm"
          :rules="noteInfoRules"
          label-width="120px"
        >
          <el-form-item label="课程名称:">
            <el-input v-model="editCourseForm.title"></el-input>
          </el-form-item>
          <el-form-item label="课程起止时间:">
            <el-date-picker
          v-model="editCourseForm.courseDate"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
          </el-form-item>
          
          <el-form-item label="教练">
          <el-select v-model="editCourseForm.coach.id" clearable placeholder="请选择">
            <el-option
              v-for="item in user"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
         <el-form-item v-if="dialogTitle === '编辑课程'" label="课程状态">
          <el-select v-model="editCourseForm.status">
                <el-option
                label="未开始"
                value="0">
                </el-option>
                <el-option
                label="已开始"
                value="1">
                </el-option>
                <el-option
                label="已结束"
                value="2">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="课程价格:">
            <el-input v-model="editCourseForm.price"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            @click="submit"
            v-if="dialogTitle === '添加课程'"
            >提 交</el-button
          >
          <el-button
            @click="saveEdit"
            v-if="dialogTitle === '编辑课程'"
            >保 存</el-button
          >
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import webservice from "../../utils/webservice";
export default {
  data() {
    return {
      searchForm: {},
      tableData: [],
      dialogFormVisible: false, //添加编辑的模态框标识
      editCourseForm: {
        coach: {
          id: "",
        },
        courseDate:[]
      }, //编辑课程的表单
      // 默认显示第几页
      currentPage: 1,
      // 个数选择器（可修改）
      pageSizes: [1, 5, 10, 20],
      // 默认每页显示的条数（可修改）
      PageSize: 5,
      dialogTitle: "", //模态框标题
      noteInfoRules: {
      },
      loginUserInfo: {}, 
      user:[],//教练
    };
  },
  mounted() {
    this.getData();
    this.loginUserInfo = JSON.parse(window.sessionStorage.getItem('userInfo'))
    this.getUserData()
  },
  methods: {
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      console.log(this.pageSizes);
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
    },
    getUserData() {
      let _param = {
        type:'1',
      };
      const params = JSON.stringify(_param)
      webservice.HttpPost("/api/user/selectUserInfoList", params, (data) => {
        if (data.code === 200) {
          this.user = data.data;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    //获取信息
    getData() {
      if (this.searchForm.payStatus) {
        var _param = {
          coachId: this.searchForm.coachId,
          status: this.searchForm.status,
          userId: this.loginUserInfo.id,
          payStatus: this.searchForm.payStatus,
        };
      }else {
        var _param = {
          coachId: this.searchForm.coachId,
          status: this.searchForm.status,
          payStatus: this.searchForm.payStatus,
        };
      }

      const params = JSON.stringify(_param)
      webservice.HttpPost("/api/course/selectCourseInfoList", params, (data) => {
        if (data.code === 200) {
          this.tableData = data.data;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    //添加课程
    submit() {
          let _param = {
            title:  this.editCourseForm.title,
            coachId:  this.editCourseForm.coach.id,
            courseStartDate:  this.editCourseForm.courseDate[0],
            courseEndDate:  this.editCourseForm.courseDate[1],
            price:  this.editCourseForm.price,
          };
           const params = JSON.stringify(_param)
          webservice.HttpPost("/api/course/insertCourseInfo", params, (data) => {
            if (data.code === 200) {
               this.$message.success({
                message: "添加成功！",
                showClose: true,
                duration: 1000,
              });
               this.dialogFormVisible = false;
               this.getData();
            } else {
               this.$message.error({
                message: data.message,
                showClose: true,
                duration: 1000,
              });
            }
          });
    },
    //保存编辑
    saveEdit() {
      let _param = {
        id: this.editCourseForm.id,
        title:  this.editCourseForm.title,
        coachId:  this.editCourseForm.coach.id,
        courseStartDate:  this.editCourseForm.courseStartDate,
        courseEndDate:  this.editCourseForm.courseEndDate,
        price:  this.editCourseForm.price,
        status:this.editCourseForm.status,
      };
       const params = JSON.stringify(_param)
      webservice.HttpPost("/api/course/updateCourseInfo", params, (data) => {
        if (data.code === 200) {
          this.dialogFormVisible = false;
          this.getData();
          this.$message.success({
            message: "保存成功！",
            showClose: true,
            duration: 1000,
          });
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    //打开添加/编辑 模态框
    openDialog(flag, row) {
      this.dialogTitle = flag;
      if (flag === "编辑课程") {
        this.editCourseForm = JSON.parse(JSON.stringify(row));
      } else {
        this.editCourseForm = {
          coach: {
            id: "",
          },
        };
      }
      this.dialogFormVisible = true;
    },
    //删除
    deleteInfo(row) {
      let _param = {
        noteId: row.id,
      };
      const params = JSON.stringify(_param)
      webservice.HttpPost("/api/course/deleteCourseInfo", params, (data) => {
        if (data.code === 200) {
          this.getData();
          this.$message.success({
            message: "删除成功！",
            showClose: true,
            duration: 1000,
          });
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    //购买课程
    buyCourse(row){
      let _param = {
        id: row.id,
        userId:this.loginUserInfo.id
      };
      const params = JSON.stringify(_param)
      webservice.HttpPost("/api/course/buyCourse", params, (data) => {
        if (data.code === 200) {
          this.getData();
          this.$message.success({
            message: "购买成功！",
            showClose: true,
            duration: 1000,
          });
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    }
  },
};
</script>

<style>
</style>